/* eslint-disable no-undef */
/* eslint-disable no-restricted-syntax */
/* eslint-disable no-console */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/prefer-default-export */
/* eslint-disable no-unused-vars */
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  MeshBuilder,
  HemisphericLight,
  Color3,
  StandardMaterial,
  ScreenshotTools
} from 'babylonjs'
import BabylonComm from './babylonComm'
import { useStore } from '@/store/index'

export class BabylonPanel {
  canvas: HTMLCanvasElement

  engine!: Engine

  scene!: Scene

  camera!: ArcRotateCamera

  light!: HemisphericLight

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas
    this.engine = new Engine(this.canvas, true, { preserveDrawingBuffer: true, stencil: true })

    this.engine.runRenderLoop(() => {
      this.scene.render()
    })

    window.addEventListener('resize', () => {
      this.engine.resize()
    })
    this.drawing()
  }

  drawing() {
    const store = useStore()
    const panelWidth = store.globalParam.width / 10
    const panelHeight = (store.globalParam.height - 100) / 10
    // const panelWidth = (this.canvas as any).offsetWidth / 10
    // const panelHeight = (this.canvas as any).offsetHeight / 10
    this.scene = new Scene(this.engine)
    // this.scene.clearColor = new Color3(0.27, 0.32, 0.35)
    const scale = store.globalParam.plottingScale

    this.camera = new ArcRotateCamera(
      'camera',
      -Math.PI / 2,
      Math.PI / 4,
      1500 / scale,
      new Vector3(0, 0, 4.5),
      this.scene
    )
    this.camera.attachControl(this.canvas, true)
    this.light = new HemisphericLight('hemiLight', new Vector3(5, 10, 0), this.scene)

    const ground = MeshBuilder.CreateGround(
      'myGround',
      { width: panelWidth * 1.5, height: panelHeight * 1.5, subdivisions: 30 },
      this.scene
    )
    const groundMat = new StandardMaterial('groundMat', this.scene)
    groundMat.diffuseColor = new Color3(0.95, 0.95, 0.95)
    console.log(store.globalParam.plottingScale)
    ground.material = groundMat
    for (const [key, pillar] of store.drawing.pillars) {
      BabylonComm.createPillar(
        pillar.points[0] / 10 - panelWidth / 2,
        -(pillar.points[1] / 10 - panelHeight / 2),
        pillar.angle,
        (pillar.height + 100) / 10,
        pillar.color,
        scale,
        this.scene
      )
    }
    // console.log(store.drawing.fences)

    for (const [key, fence] of store.drawing.fences) {
      BabylonComm.createFence(
        fence.points[0] / 10 - panelWidth / 2,
        -(fence.points[1] / 10 - panelHeight / 2),
        fence.angle,
        fence.width / 10,
        fence.height / 10,
        fence.color,
        scale,
        this.scene
      )
    }
    for (const [key, door] of store.drawing.doors) {
      if (door.type === 'JLM') {
        BabylonComm.createDoor(
          door.points[0] / 10 - panelWidth / 2,
          -(door.points[1] / 10 - panelHeight / 2),
          door.angle,
          door.width / 10,
          door.height / 10,
          door.color,
          door.direction,
          scale,
          this.scene
        )
      } else {
        BabylonComm.createPymDoor(
          door.points[0] / 10 - panelWidth / 2,
          -(door.points[1] / 10 - panelHeight / 2),
          door.angle,
          door.width / 10,
          door.height / 10,
          door.color,
          door.direction,
          scale,
          this.scene
        )
      }
    }
  }

  async getImageData() {
    const image = await ScreenshotTools.CreateScreenshotUsingRenderTargetAsync(
      this.engine,
      this.camera,
      { precision: 1 }
    )
    return image
  }
}
